<template>
  <u-popup :show="showPopup" :mode="mode" :round="10" :closeOnClickOverlay="closeOnClickOverlay" @close="onClosePopup">
    <view class="jk-popup-head">
      <view class="jk-popup-head-item" @click="onClosePopup">{{ closeText }}</view>
      <view class="jk-popup-head-item jk-popup-head-title">{{ title }}</view>
      <view class="jk-popup-head-item jk-popup-head-item-confirm">
          <view v-if="showConfirm" @click="onConfirmPopup">确定</view>
      </view>
    </view>
    <view class="jk-popup-content" :style="[customStyle]">
      <slot></slot>
    </view>
  </u-popup>
</template>

<script>
  export default {
    name: 'JkPopup',
    props: {
      show: {
        type: Boolean,
        default: false
      },
        closeOnClickOverlay: {
            type: Boolean,
            default: true
        },
      title: {
        type: [String, Number],
        default: ''
      },
      closeText: {
        type: [String],
        default: '关闭'
      },
        mode: {
            type: String,
            default: 'bottom'
        },
        showConfirm: {
            type: Boolean,
            default: true
        },
        customStyle: {
          type: Object,
            default() {
              return {
                  padding: '32rpx 32rpx 32rpx 32rpx',
                  marginTop: '20rpx'
              };
            }
        }
    },
    data() {
      return {
        showPopup: false
      };
    },
    methods: {
        onConfirmPopup() {
            this.$emit('confirm');
        },
      onClosePopup() {
          this.$emit('cancel', false);
          this.$emit('close', false);
      }
    },
    watch: {
      show(newVal) {
        this.showPopup = newVal;
      }
    }
  }
</script>
<style lang="scss" scoped>
  .jk-popup-head {
    height: 88rpx;
    padding: 0 32rpx;
    box-sizing: border-box;
    border-bottom: solid 1rpx #e8eaec;
    display: flex;
    justify-content: space-between;
    align-items: center;
    //margin-bottom: 20rpx;
    .jk-popup-head-item-confirm {
      text-align: right;
    }
    .jk-popup-head-item {
      font-size: 28rpx;
      width: calc(100% / 3);
    }
    .jk-popup-head-title {
      height: 100%;
      font-size: 34rpx;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }

  .jk-popup-content {
    //padding: 32rpx 32rpx 32rpx 32rpx;
  }
</style>
